<template>
    <div id="message-detail" class="flex-center" ref="messageDetail" style="left:0;">
        <div class="iframe-container align-center" ref="iframeContainer">
            <div class="webview-title s-14">
                <span>消息详情</span>
                <img class="close pointer" style="-webkit-app-region: no-drag;"  src="../../../assets/img/login/close.png" alt="" @click="close">
            </div>
            <webview class="webview" :src="msgUrl" frameborder="0"></webview>
            <div class="webviewInnerdiv flex-end" v-if="bookId">
                <div class="webviewInnerdiv-btn pointer align-center" @click="toCorrespondBook">
                    <div>跳转</div>
                    <div>课时</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import bus from '../../../assets/js/bus'
import { SqlLib } from '../../../../../../static/lib/sqlite/SqlLib'
import { SqlLibUser } from '../../../../../../static/lib/sqlite/service/SqlLibUser'
export default {
    props: ['isShowdetail', 'msgUrl', 'bookId', 'lessonId'],
    data() {
        return {
            html: '',
            showWebview: false
        }
    },
    created() {
        // shell.openExternal(this.src)
        // document.domain = 'mp.weixin.qq.com'
    },
    mounted() {
        this.$refs.messageDetail.addEventListener('transitionend', () => {
            this.showWebview = true
            console.log(this.showWebview)
        })
        bus.$on('closeMessagecenter', () => {
            console.log('closeMessagecenter')
            this.isShowdetail = false
        })
        this.$nextTick(() => {
            let webview = document.querySelector('webview')
            webview.addEventListener('did-start-loading', e => {
                this.$refs.messageDetail.style.width = '100vw'
            })
            webview.addEventListener('did-stop-loading', e => {
                webview.insertCSS(
                    `*::-webkit-scrollbar {
                        width: 4px;
                    }

                    *::-webkit-scrollbar-thumb {
                        border-radius: 10px;
                        background: rgba(171, 178, 185, 0.9);
                    }

                    *::-webkit-scrollbar-track {
                        background: transparent;
                    } 
                    .rich_media_area_extra{
                        padding:0 !important;
                    }
                    .rich_media_inner {
                        display: flex;
                        justify-content: center;
                        width: 100%;
                        background: #fff;
                    }
                    `
                )
                webview.executeJavaScript(
                    `   document.documentElement.scrollTop  = 0
                    `
                )
            })

            webview.addEventListener('dom-ready', _ => {
                // webview.openDevTools()
                // let bosdiv = document.createElement('div')
                // bosdiv.innerText = '跳转课时'
                // bosdiv.classList += 'bosdiv'
                // document.body.appendChild()
            })
        })
    },
    beforeDestroy() {
        this.$refs.messageDetail.removeChild(this.$refs.iframeContainer)
        this.src = ''
    },
    methods: {
        close() {
            this.$refs.messageDetail.addEventListener('transitionend', () => {
                this.$emit('update:isShowdetail', false)
            })
            this.$refs.messageDetail.style.left = ''
            this.$refs.messageDetail.style.right = 0
            this.$refs.messageDetail.style.width = 0
        },
        toCorrespondBook() {
            this.$emit('closeMessageCenter')
            let sqlLib = SqlLib.getInstance(window.$DBDIR)
            let user = SqlLibUser.queryCurrentUser(sqlLib)
            user.lessonId = this.lessonId || ''
            user.bookId = this.bookId || ''
            sqlLib.updateObjectById(user)
            this.$emit('update:isShowdetail', false)
            if (this.$route.name !== "home") {//当前页面不是home页
                this.$router.push({ name: 'home', params: { lessonId: this.lessonId, bookId: this.bookId } })
            } else {
                bus.$emit("refreshHome")
            }
        },
    }
}
</script>

<style lang="scss" >
#message-detail {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    width: 0;
    height: 100vh;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
    z-index: 9999;
    .webviewInnerdiv {
        background-color: #fff;
        font-size: 16px;
        width: 100%;
    }
    .webviewInnerdiv-btn {
        font-size: 16px;
        margin-right: 20px;
        margin-bottom: 10px;
        background-color: #4894ff;
        color: #fff;
        border-radius: 50%;
        height: 60px;
        width: 60px;
        box-shadow: 0px 10px 10px 0px rgba(136, 173, 202, 0.2);
    }
    .iframe-container {
        width: 80vw;
        max-width: 1440px;
        height: 95vh;
        max-height: 900px;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.5s ease-in-out;
        background: #fff;
        .webview-title {
            width: calc(100% + 4px);
            background-color: #fff;
            text-align: center;
            background-color: #f4f4f4;
            padding: 10px 0;
            position: relative;
            .close {
                position: absolute;
                top: 50%;
                right: 10px;
                transform: translateY(-50%);
                width: 15px;
                height: 15px;
                z-index: 999;
                cursor: pointer;
            }
        }
    }
    .webview {
        width: 80vw;
        flex: 1;
        background: #fff;
    }
    @media screen and(max-width: 1439px) {
        .iframe-container {
            width: 90vw;
        }
        .webview {
            width: 90vw;
        }
    }
    .webview-btn {
        background-color: #fff;
        width: 100%;
    }
}
</style>